<script lang="ts">
import { useEventListener } from '@peng_kai/kit/libs/vueuse';
import { NavManager, NavView } from '@peng_kai/kit/vue/components/nav-manager';
import GameRecord from './GameRecord.vue';
import UserProfile from './UserProfile.vue';

export const userProfilePopup = useAntdModal({
  // eslint-disable-next-line import/no-self-import
  is: defineAsyncComponent(() => import('./index.vue')),
  type: 'modal',
}, {
  wrapClassName: 'ant-cover__Modal-drawer __screen-drawer',
  class: 'h-70vh',
  centered: true,
  footer: null,
});

function useMyScroll(el: Ref<HTMLElement | undefined | null>) {
  const y = ref<number>();

  useEventListener(el, 'scroll', (ev) => {
    y.value = (ev.target as HTMLElement).scrollTop;
  });

  watch(el, (el) => {
    y.value = el ? el.scrollTop : undefined;
  }, { immediate: true });

  return { y };
}
</script>

<script setup lang="ts">
const props = defineProps<{
  userId: string;
}>();

const emits = defineEmits<{
  close: [];
}>();

// const userStore = useUserStore();
const $userProfile = ref();

// 基于滚动位置计算header背景的透明的
const $scrollContainer = computed(() => {
  const el = $userProfile.value?.$el as HTMLDivElement;
  const ctn = el?.parentElement;
  return ctn;
});
const { y } = useMyScroll($scrollContainer);
const opacity = computed(() => y.value === undefined ? 1 : (y.value - 15) / 70);

// const indexTitle = computed(() => props.userId === userStore.userInfo?.uid ? $t('0gdekRcJaZf6aN4Gw4Tq') : $t('xEClWWdobZvUgWmtJiRda'));
</script>

<template>
  <NavManager
    class="user-info pointer-events-auto pointer-events-auto h-90vh max-h-200 overflow-hidden bg-sys-layer-c lt-mobile:(h-[var(--dfvh)]) !p-0"
    @close="emits('close')"
  >
    <NavView name="index" title="Profile" #="{to}">
      <UserProfile ref="$userProfile" :userId="props.userId" @showGameRecord="to('gameRecord')" />
    </NavView>
    <NavView name="gameRecord" :title="$t('nyVrTwXoj86cgWtCqG_9')">
      <GameRecord :userId="props.userId" />
    </NavView>
  </NavManager>
</template>

<style lang="scss" scoped>
.user-info :deep(.nav-header) {
  --uno: 'px-4 w-auto h-13';

  // background-color: rgb(38 39 46 / v-bind('opacity'));
  background-color: v-bind('`rgb(38 39 46 / ${opacity})`');

  .nav-title {
    --uno: 'text-lg font-600';
  }

  .nav-close-btn {
    --uno: 'text-sys-text-head';
  }
}
</style>
